<template>
  <section class="details">
    <p v-show="showDetails" @click="goBack" class="iconfont iconxiaoyuhao"></p>
    <div v-show="!showDetails" class="backDetails" :style="opacityStyle">
      <i @click="goBack" class="iconfont iconxiaoyuhao"></i>
      活动详情
    </div>
    <img class="banner" src="@/assets/images/activity.jpg"/>
    <div class="box">
      <h3>{{ActivityDetails.name}}</h3>
      <div class="mess">
        <i class="iconfont iconrili">{{ActivityDetails.date}}</i>&nbsp;
        <i class="iconfont iconeye">{{ActivityDetails.num}}</i>
      </div>
      <p class="introduce">{{ActivityDetails.introduce}}</p>
      <img class="detailimg" :src="ActivityDetails.imgUrlDetails"/>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ActivityDetails',
  data () {
    return {
      ActivityDetails: [],
      showDetails: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  created () {
    this.getActivityDetails(this.$route.params.id)
  },
  activated () { // keep-alive组件激活时调用。 在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () { // keep-alive组件停用时调用。 在被包裹组件停止使用时调用
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop
      if (top > 20) {
        let opacity = top / 60
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.showDetails = false
      } else {
        this.showDetails = true
      }
      console.log(document.documentElement.scrollTop)
    },
    getActivityDetails (id) {
      this.axios.get('/activityItem/' + id)
        .then((res) => {
          console.log(res)
          let data = res.data
          this.ActivityDetails = data
        })
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .details
    background #fff
    width: 100%
    min-height 100vh
    position: relative
    .iconxiaoyuhao
      width 100%
      position absolute
      top 1%
      left 1%
      font-size 55px
      font-weight 600
      color #fff
      z-index 999
    .backDetails
      width 100%
      position fixed
      top 0
      left 0
      font-size 32px
      color #fff
      z-index 999
      text-align center
      background #f8c45f
      padding 23px 0
      .iconxiaoyuhao
        position absolute
        top 11%
        left -45%
        font-size 50px
        font-weight 600
        color #fff
    .banner
      width 100%
      height auto
      margin 0 0 20px
    .box
      padding 20px 30px
      h3
        font-size 40px
        font-weight 600
        color #747474
      .mess
        width 100%
        margin 10px 0 20px
        i
          font-size 22px
        .mess i:nth-child(2)
          margin-left 45px
      .introduce
        font-size 28px
      .detailimg
        width 100%
        height auto
        margin 20px 0
</style>
